<template>
	<view>

		<view class="bg_box">
			<image class="bg01" :src="'https://cxh-imgs.oss-cn-shanghai.aliyuncs.com/static/' + 'bg05.png'" mode="widthFix"></image>
			<view class="bg_content">

				<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
					<view class="back iconfont icon-xiangzuo1" @tap="backPage"></view>
					<view class="text">骑手装备</view>
				</view>
				<view class="clear_box"></view>
				
				<view class="goods_box">
					<block v-for="(item, index) in info" :key="'goods' + index">
						<view class="goods" :data-url="'/pages/goods/goods?id=' + item.id" @click="gotopage">
							<view class="goods_img"><image :src="item.goods_master_image" mode="widthFix"></image></view>
							<view class="title">{{item.goods_name}}</view>
							<view class="text">{{item.goods_subname}}</view>
							<view class="show_box">
								<view class="money_box">
									￥{{item.goods_price}}
									<!-- <view class="no_money">
										￥{{item.goods_market_price}}
									</view> -->
								</view>
								<view class="sell02">
									<image :src="'https://cxh-imgs.oss-cn-shanghai.aliyuncs.com/static/' + 'bg02.png'" mode="widthFix"></image>
								</view>
							</view>
				
						</view>
					</block>
				</view>
				
			</view>
		</view>

		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrrol: false,
				info:'',
				page:1,

			}
		},
		onLoad(e) {
			let that = this;

		},
		onShow() {
			let that = this;
			that.page = 1;
			that.loadData();
			
		},
		methods: {
			loadData() {
			  let that = this;
			  that.Net._get('terminal/goods_list',{per_page:'10',page:that.page,}, res => {
			    if(res.code == 200){
			      that.info = res.data.data;
			    }
			  });
			},
			backPage() {
				uni.navigateBack({});
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: url
				});
			},
		},
		onPageScroll: function(Object) {
			//console.log(Object.scrollTop); //实时获取到滚动的值
			if (Object.scrollTop > 28) {
				this.scrrol = true;
				/* #ifdef APP-PLUS */
				/* #endif */
			} else if (Object.scrollTop < 28) {
				this.scrrol = false;
				/* #ifdef APP-PLUS */
				/* #endif */
			}
		},
		onPullDownRefresh() {
			//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
			let that = this;
			that.page = 1;
			that.info = [];
			setTimeout(function() {
				uni.stopPullDownRefresh();
				that.loadData();
			}, 500);
		},
		onReachBottom() {
		  var that = this;
		  that.page++;
		  that.Net._get('terminal/goods_list',{per_page:'10',page:that.page,}, res => {
		    if (res.code == 200) {
		      //console.log(res)
		      if (res.data.data == '') {
		        uni.showToast({
		          title: '已经是最后一页了',
		          duration: 2000,
		          icon: 'none'
		        });
		      } else {
		        that.info = that.info.concat(res.data.data); //将数据拼接在一起
		      }
		    } else if (res.code == 0) {
		      that.Msg.Success(res.msg, res => {});
		    }
		  });
		},
	}
</script>

<style>
	
	.scrrolHeader {
		background-color: #fef2e6 !important;
	}

	.header {
		background-color: transparent;
	}

	.header .text {
		background-color: transparent;
	}

	.clear_box07 {
		height: 27vw;
	}

	.bg_box {
		width: 100%;
		position: relative;
	}

	.bg_box .bg01 {
		width: 100%;
		display: block;
	}

	.bg_box .bg_content {
		width: 100%;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 999;
		padding-bottom: 15vw;
	}
	
	.master_list{
		width: 92%;
		margin: 4% auto 0;
		background-color: #fff;
		border-radius: 3vw;
		padding: 3vw;
		display: flex;
		align-items: center;
	}
	
	.master_list .master_img{
		width: 30vw;
		margin-right: 3vw;
	}
	
	.master_list .master_img image{
		width: 100%;
		display: block;
	}
	
	.master_list .master_text{
		flex: 1;
	}
	
	.master_list .master_text .title{
		font-size: 4vw;
		color: #333;
		font-weight: bold;
	}
	
	.master_list .master_text .list{
		display: flex;
		align-items: center;
		margin-top: 2vw;
	}
	
	.master_list .master_text .list .icon{
		width: 3.5vw;
	}
	
	.master_list .master_text .list .icon image{
		width: 100%;
	}
	
	.master_list .master_text .list .text{
		font-size: 3vw;
		color: #333;
		margin-left: 1.5vw;
	}
	
	.goods_box {
		width: 92%;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		justify-content: left;
		flex-wrap: wrap;
		margin-top: 4vw;
	}
	
	.goods_box::after {
		flex: auto;
		content: '';
	}
	
	.goods_box .goods {
		width: 48%;
		flex-basis: auto;
		margin-bottom: 4%;
		border-radius: 2vw;
		background-color: #fff;
		box-shadow: 0px 1px 4.65px 0.35px rgba(51, 51, 51, 0.09);
		padding-bottom: 3vw;
	}
	
	
	
	.goods_box .goods:nth-child(odd) {
		margin-right: 4%;
	}
	
	.goods_box02 .goods{
		width: 100%;
		margin-right: 0 !important;
	}
	
	.goods_box .goods .goods_img {
		width: 100%;
		background-color: #f4f4f4;
		border-radius: 2vw 2vw 0 0;
	}
	
	.goods_box .goods .goods_img image {
		width: 100%;
		border-radius: 2vw 2vw 0 0;
	}
	
	.goods_box .goods .title {
		font-size: 3.8vw;
		color: #333;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		width: calc(100%);
		padding: 0 2vw;
		line-height: 6vw;
		font-weight: bold;
		margin-top: 2vw;
	}
	
	.goods_box .goods .text {
		font-size: 3.2vw;
		color: #999999;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
		width: calc(100%);
		padding: 0 2vw;
		margin-top: 1vw;
	}
	
	.goods_box .goods .show_box {
		width: calc(100%);
		padding: 0 1.5vw;
		display: flex;
		align-items: center;
		position: relative;
		margin-top: 1vw;
	}
	
	.goods_box .goods .show_box .money_box {
		flex: 1;
		display: flex;
		justify-content: flex-start;
		font-size: 5vw;
		font-weight: bold;
		color: #FF0200;
		align-items: center;
	}
	
	.goods_box .goods .show_box .money_box .no_money {
		color: #BFC0BE;
		font-size: 3.5vw;
		margin-left: 0.5vw;
		text-decoration: line-through;
		font-weight: 500;
	}
	
	
	.goods_box .goods .show_box .sell {
		width: 20vw;
		font-size: 3.5vw;
		background-color: #FF9822;
		color: #fff;
		text-align: center;
		height: 8vw;
		line-height: 8vw;
		border-radius: 8vw;
	}
	
	.goods_box .goods .show_box .sell02{
		width: 6vw;
		margin-top: 1vw;
	}
	
	.goods_box .goods .show_box .sell02 image{
		width: 100%;
	}
	

</style>